<template>
	<view>
		
		<view  class="zupus_item flex ali-c"  style="border-bottom: 1rpx solid #BDBDBD;">
			<view style=" width: 100%;height: 55rpx; align-items: center; display: flex;">
				<scroll-view ref="tabbar1"   style=" flex-direction: row;width: 100%;" scroll-x :scroll="false" :show-scrollbar="false" >
					<view style=" display: flex;  justify-content:space-around; align-items: center;">
						<view v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"  :data-id="index" :data-current="index" @click="selectfun(tab)">
							<text class="title"  v-if="nav_active != tab.id" style="font-size: 35rpx; ">{{tab.title}}</text>
							<text class="title"  v-if="nav_active == tab.id" style="font-size: 35rpx; font-weight: bold;">{{tab.title}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="zupus_item flex ali-c"  style="display: flex; flex: 1; background-color: #fff;">
			<swiper style="width: 100%; height: 80vh;" :current-item-id="nav_active" circular :disable-touch="true"  >
				<swiper-item   v-for="(item,index) in tabBars" :key="item.id" :item-id="item.id">  
				
				<view class="menu_user_list">
					
					
						
						
						<view class="" v-if="item.id == 'id1'" >
							<view class="" style=" border-radius: 30rpx; ">
								<view>
									<text style="font-size: 35rpx; background-color:#FFBB00; color: #fff; padding-left: 15rpx; padding-right: 15rpx;border-radius: 15rpx;">{{sort.name|| ''}}</text>
								</view>	
								<view class="" style="margin-top: 15rpx;">
									<text style="font-size: 35rpx;">{{content.title|| ''}}</text>
								</view>
								
								
								<view class="" style="margin-top: 20rpx;display: flex; justify-content: space-between;">
									<view class="" style="display: flex; align-items: center;">
										<view class="">
											<image :src="photo_cdn + content.avatar" mode="" style="width: 100rpx; height: 100rpx; border-radius: 50%;" ></image>
										</view>
										<view class="" style="margin-left: 15rpx;">
											<view class="">
												{{content.nickname || ''}}
											</view>
											<view class="">
												{{content.create_time_text || ''}}
											</view>
										</view>
									</view>
								
								</view>
								
								<view class="" style="margin-top: 20rpx;">
									 <rich-text  :nodes="repairRichText(content.content|| '')"  :preview="true"></rich-text>
								</view>
								
								<hr style="margin-top: 15rpx;"> 
								<view class="">
									<view class="" style=" display: flex; align-items: center; justify-content: space-between;">
										<view class="" style="font-size: 35rpx;align-items: center; display: flex; color: #808080; margin-left: 25rpx;">
											<image style="width: 35rpx; height: 35rpx; margin-right: 10rpx;"  :src="photo_cdn+'/zpupload/static/bbs/view1.png'"></image>
											{{content.view || 0}}
										</view>
										
										<view class="" style="font-size: 35rpx;align-items: center; display: flex; color: #808080; margin-left: 25rpx;" @tap="dianzan(content.id)">
											<image v-if="dianzanval == null" style="width: 35rpx; height: 35rpx; margin-right: 10rpx;" :src="photo_cdn+'/zpupload/static/bbs/zan1.png'"></image>
											<image v-if="dianzanval == 1" style="width: 35rpx; height: 35rpx; margin-right: 10rpx;" :src="photo_cdn+'/zpupload/static/bbs/zan.png'"></image>
											{{content.agree || 0}}
										</view>
										
										
										<view class="" style="font-size: 35rpx;align-items: center; display: flex; color: #808080; margin-left: 25rpx;">
											<image style="width: 35rpx; height: 35rpx; margin-right: 10rpx; color: #808080; ":src="photo_cdn+'/zpupload/static/bbs/xiaoxi1.png'"></image>
											{{reply.total || 0}}
										</view>
										
										
										
										
									</view>
									<view class="" style="margin-top: 20rpx;">
										<view class=""  @tap="sendcontent()"  style="display: flex; justify-content: center; border: 1rpx solid #000; border-radius: 15rpx; font-size: 45rpx; align-items: center;">
											发表评论
										</view>
									</view>
								</view>
							
							</view>
						</view>
						
						
						
						<view class="" v-if="item.id == 'id2'" >
							
							
							
							
							
							<view class="">
								<view class="" v-for="(item,index) in reply.data" :key="index" style="margin-top: 35rpx;display: flex; border-bottom: 1rpx solid #808080; padding-bottom: 10rpx;">
									<view class="" style="width: 20%;display: flex; justify-content: center;">
										<image :src="photo_cdn + item.avatar" mode="" style="width: 100rpx; height: 100rpx; border-radius: 50%;" ></image>
									</view>
									<view class="" style="width: 70%;">
										<view class="" style="display: flex;">
											<view class="">
												{{item.nickname || ''}}
											</view>
											<view class="" style="margin-left: 10rpx;">
												{{item.create_time_text || ''}}
											</view>
										</view>
										<view class="">
											<rich-text  :nodes="repairRichText(item.content|| '')"  :preview="true"></rich-text>
										</view>
									</view>
									<view class="" style="width: 10%; display: flex; justify-content: center;">
										<view class="">
											{{index+1}}楼
										</view>
									</view>
								</view>
							</view>
							
						</view>
						
						
					
					
				</view>
				
				
				</swiper-item>
			</swiper>
		</view>
		
		
		
		
		
		<uni-popup ref="popup" type="center">
			
			
			<view class="" style="width: 650rpx; border-radius: 15rpx; background-color: #fff; ">
				
				<view class="" style="width: 100%; padding: 5rpx; margin: 10rpx auto;">
					<textarea  :auto-focus="true"   class="lable_textarea_tag" style="border: 1rpx solid #808080; " v-model="contentValue"  maxlength="-1"></textarea>
				</view>
				
				<view class="" style="display: flex; justify-content: center; padding-bottom: 20rpx;">
					<button size="mini" type="primary" @tap="sengpinglun()" >发表评论</button>
				</view>
				
			</view>
			
			
			
		</uni-popup>
		
		
	</view>
</template>

<script>
	import {bbsGetContentInfo,bbssetContentReply} from "@/utils/api/bbs.js";
	import config from "@/utils/config.js";
	let {photo_cdn} = config.baseUrl;
	export default {
		data() {
			return {
				photo_cdn,
				sort:{
					name:''
				},
				content:{
					title:null,
					avatar:null
				},
				reply:{
					total:null,
					data:null
				},
				
				dianzanval:null,
				contentValue:'',
				
				keyid:null,
				
				tabBars:[
					{
						title:'话题',
						id:'id1'
					},{
						title:'评论',
						id:'id2'
					}
				],
				nav_active:'id1'
				
	
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.keyid = option.id;
			this.getlist();
		},
		methods: {
			selectfun(e){
				let that = this;
				that.nav_active = e.id;
				
			},
			getlist(){
				bbsGetContentInfo({
					id:this.keyid
				}).then(res=>{
					console.log(res)
					this.sort = res.data.sort;
					this.content = res.data.content;
					this.reply = res.data.reply;
					this.reply.total = res.data.reply.data.length;
				})
			},
			sengpinglun(){
				bbssetContentReply({
					type:2,
					id:this.content.id,
					content:this.contentValue
				}).then(res=>{
					console.log(res)
					this.contentValue = '';
					this.$refs.popup.close()
					this.getlist();
				})
			},
			sendcontent(){
				this.contentValue = '';
				 this.$refs.popup.open('top')
			},
			
				dianzan(e){
					if(this.dianzanval == null){
						this.dianzanval = 1;
						this.content.agree = this.content.agree+1;
						bbssetContentReply({
							type:1,
							id:e
						}).then(res=>{
							console.log(res)
						})
					}
				},
				
				
				/**
				* 修复富文本图片宽度
				* @description 解决图片宽高超出显示不全问题(让其自适应)
				* @param {String} html - 富文本
				* @return String
				*/
				repairRichText(html) {
					// 去掉<img>中style /width / height属性
					let newContent = html.replace(/<img[^>]*>/gi, (match) => {
						match = match.replace(/style="[^"]+"/gi,                        '').replace(/style='[^']+'/gi, '')
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
						match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '') // 去除 style=""这样的属性
						return match
					})
					// 修改所有style里的width属性为max-width:100%
					newContent = newContent.replace(/style="[^"]+"/gi, (match) => {
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;')
						return match
					})
				 
					// 去掉所有<br/>标签
					newContent = newContent.replace(/<br[^>]*\/>/gi, '')
					// img标签添加style属性：max-width:100%;height:auto
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
					)
					return newContent;
				},
		}
	}
</script>

<style lang="scss">
	.lable_textarea_tag{
		width: 100%;
		padding: 30rpx;
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		box-sizing:border-box;
	}
	.menu_user_list{
		padding: 20rpx 0;
		margin: 20rpx;
		box-shadow: 8rpx -4rpx 2rpx 2rpx #F8F8F8;
	}

</style>
